<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
<script src="js/bootstrap.min.js" charset="UTF-8"></script>
<script src="js/jquery.form.js" charset="UTF-8"></script>
<script src="js/global.js" charset="UTF-8"></script>
<script src="js/login.js" charset="UTF-8"></script>
<script src="js/swiper.min.js" charset="UTF-8"></script>
<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
<title>U袋网 - 登录 / 注册</title>
<!-- 引入layui样式和脚本 -->
<link rel="stylesheet" href="../admin/layui/css/layui.css">
<script src="../admin/layui/layui.js"></script>
<script src="js/jquery.js"></script>
<script src="js/md5.js"></script>
<style>
.code {
	font-family: Arial;
	font-style: italic;
	color: #fcf8e3;
	font-size: 30px;
	border: 0;
	padding: 2px 3px;
	letter-spacing: 3px;
	font-weight: bolder;
	float: left;
	cursor: pointer;
	width: 175px;
	height: 50px;
	line-height: 60px;
	text-align: center;
	vertical-align: middle;
	background-color: #c41609;
}

#huan {
	text-decoration: none;
	font-size: 18px;
	color: #288bc4;
	padding-left: 10px;
}

#huan:hover {
	text-decoration: underline;
	cursor: pointer;
}
</style>
</head>
<body>
	<!-- 顶部tab -->
	<!-- 引入头部 -->
	<jsp:include page="header.jsp"></jsp:include>
	<link rel="stylesheet" href="../admin/layui/css/layui.css">
	<script src="../admin/layui/layui.js"></script>
	<div
		style="background: url(images/login_bg.jpg) no-repeat center center;">
		<div class="login-layout container">
			<!-- 登录  action="login"-->
			<div class="form-box login">
				<div class="tabs-nav">
					<h2>欢迎登录U袋网平台</h2>
				</div>
				<div class="tabs_container">
					<form class="layui-form tabs_form" action="" method="post"
						id="login_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-userPhone" aria-hidden="true"></span>
								</div>
								<input class="form-control userPhone" name="userPhone"
									id="login_userPhone" required placeholder="手机号" maxlength="11"
									autocomplete="off" type="text">
							</div>
						</div>
						<div class="layui-form-item" style="height: 70px;">
							<div class="form-group layui-input-block"
								style="margin-top: 2px; margin-left: 1px;">
								<div class="field">
									<div id="checkCode" class="code" onclick="createCode(4)"></div>
									<span onclick="createCode(4)" id="huan">看不清换一张</span>
								</div>
								<div class="field">
									<input type="text" placeholder="验证码"
										class="input input-big text form-control" id="inputCode"
										name="code" onblur="validateCode()" /> <span id="codeTip"></span>
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</div>
								<input class="form-control userPwd" name="userPwd"
									id="login_pwd" placeholder="请输入密码" autocomplete="off"
									type="password">
								<div class="input-group-addon pwd-toggle" title="显示密码">
									<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
								</div>
							</div>
						</div>
						<div class="checkbox">
							 <a href="javascript:;" class="pull-right" id="resetpwd">忘记密码？</a>
						</div>
						<!-- 错误信息 -->
						<!-- <div class="form-group">
							<div class="error_msg" id="login_error">
								错误信息 范例html
								<div class="alert alert-warning alert-dismissible fade in" role="alert">
									<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									<strong>密码错误</strong> 请重新输入密码
								</div>
								
							</div>
						</div> -->
						<button class="btn btn-large btn-primary btn-lg btn-block submit"
							id="login_submit" type="submit" lay-submit lay-filter="dengLu">登录</button>
						<br>
						<p class="text-center">
							没有账号？<a href="javascript:;" id="register">免费注册</a>
						</p>
					</form>
					<!-- <div class="tabs_div">
						<div class="success-box">
							<div class="success-msg">
								<i class="success-icon"></i>
								<p class="success-text">登录成功</p>
							</div>
						</div>
						<div class="option-box">
							<div class="buts-title">现在您可以</div>
							<div class="buts-box">
								<a role="button" href="index.jsp"
									class="btn btn-block btn-lg btn-default">继续访问商城</a> <a
									role="button" href="udai_welcome.jsp"
									class="btn btn-block btn-lg btn-info">登录会员中心</a>
							</div>
						</div>
					</div> -->
				</div>
			</div>
			<!-- 注册 -->
			<div class="form-box register">
				<div class="tabs-nav">
					<h2>
						欢迎注册<a href="javascript:;" class="pull-right fz16" id="reglogin">返回登录</a>
					</h2>
				</div>
				<div class="tabs_container">
					<form class="layui-form tabs_form" action="" method="post"
						id="register_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-userPhone" aria-hidden="true"></span>
								</div>
								<input class="form-control userPhone" name="userPhone"
									id="register_userPhone" required lay-verify="phone"
									placeholder="手机号" maxlength="11" autocomplete="off" type="text">
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<input type="text" name="code" id="code1" placeholder="验证码"
									required class="form-control" /> <input type="button"
									value="获取验证码" onclick="fasong2()"
									class="btn btn-primary getsms" />
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</div>
								<input class="form-control userPwd" name="userPwd"
									id="register_pwd" required lay-verify="required"
									placeholder="请输入密码" autocomplete="off" type="password">
								<div class="input-group-addon pwd-toggle" title="显示密码">
									<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
								</div>
							</div>
						</div>
						<!-- <div class="checkbox">
							<label> <input checked="" id="register_checkbox"
								type="checkbox"><i></i> 同意<a
								href="temp_article/udai_article3.jsp">U袋网用户协议</a>
							</label>
						</div> -->
						<!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="register_error"></div>
						</div>
						<button class="btn btn-large btn-primary btn-lg btn-block submit"
							id="register_submit" type="submit" lay-submit
							lay-filter="insertSub">注册</button>
					</form>
					<!-- <div class="tabs_div">
						<div class="option-box">
							<div class="buts-title">现在您可以</div>
							<div class="buts-box">
								<a role="button" href="index.jsp"
									class="btn btn-block btn-lg btn-default">继续访问商城</a> <a
									role="button" href="udai_welcome.jsp"
									class="btn btn-block btn-lg btn-info">登录会员中心</a>
							</div>
						</div>
					</div> -->
				</div>
			</div>
			<!-- 修改密码 -->
			<div class="form-box resetpwd">
				<div class="tabs-nav clearfix">
					<h2>
						找回密码<a href="javascript:;" class="pull-right fz16" id="pwdlogin">返回登录</a>
					</h2>
				</div>
				<div class="tabs_container">
					<form class="layui-form tabs_form"
						action="https://rpg.blue/member.php?mod=logging&action=login"
						method="post" id="resetpwd_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-userPhone" aria-hidden="true"></span>
								</div>
								<input class="form-control userPhone" name="userPhone"
									id="resetpwd_userPhone" required placeholder="手机号"
									maxlength="11" autocomplete="off" type="text">
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<input type="text" name="code" id="code" placeholder="验证码"
									required class="form-control" /> <input type="button"
									value="获取验证码" onclick="fasong()" class="btn btn-primary getsms" />
							</div>
						</div>

						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</div>
								<input class="form-control userPwd" name="userPwd"
									id="resetpwd_pwd" placeholder="新的密码" autocomplete="off"
									type="password">
								<div class="input-group-addon pwd-toggle" title="显示密码">
									<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
								</div>
							</div>
						</div>
						<!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="resetpwd_error"></div>
						</div>
						<button class="btn btn-large btn-primary btn-lg btn-block submit"
							id="resetpwd_submit" type="button" lay-submit lay-filter="updPwd">重置密码</button>
					</form>
					<!-- <div class="tabs_div">
						<div class="success-box">
							<div class="success-msg">
								<i class="success-icon"></i>
								<p class="success-text">密码重置成功</p>
							</div>
						</div>
						<div class="option-box">
							<div class="buts-title">现在您可以</div>
							<div class="buts-box">
								<a role="button" href="index.jsp"
									class="btn btn-block btn-lg btn-default">继续访问商城</a> <a
									role="button" href="login.html"
									class="btn btn-block btn-lg btn-info">返回登陆</a>
							</div>
						</div>
					</div> -->
				</div>
			</div>
			<script>
				$(document).ready(function() {
					// 判断直接进入哪个页面 例如 login.php?p=register
					switch ($.getUrlParam('p')) {
					case 'register':
						$('.register').show();
						break;
					case 'resetpwd':
						$('.resetpwd').show();
						break;
					default:
						$('.login').show();
					}
					;
					// 以下确定按钮仅供参考
					$('.submit').click(function() {
						var form = $(this).parents('form')
						var userPhone = form.find('input.userPhone');
						var pwd = form.find('input.userPwd');
						var error = form.find('.error_msg');
						var success = form.siblings('.tabs_div');
						var options = {
							beforeSubmit : function() {
								console.log('喵喵喵')
							},
							success : function(data) {
								console.log(data)
							}
						}
					})
					//监听头部表单提交---添加表单

				});
				layui.use([ 'form', 'layer' ], function() {
					var form = layui.form;
					var $ = layui.$;
					var layer = layui.layer;

					form.on('submit(dengLu)', function(data) {
						var login_userPhone = $('#login_userPhone').val();
						var login_pwd = $('#login_pwd').val();
						//alert(md5(login_pwd));
						$.post("login", {
							"userPhone" : login_userPhone,
							"userPwd" : md5(login_pwd)
						}, function(res) {
							console.log(res);
							if (res.code == 0) {//登陆成功
								//alert("登录成功")
								//layer.msg(res.msg);
								//time: 3000
								//跳转到首页
								location.href = "getAllHome";
							} else {//失败
								layer.msg(res.msg);
								location.href = "login.jsp";
							}
						}, "json");
						return false;
					});

					form.on('submit(insertSub)',
							function(data) {
								var register_userPhone = $(
										'#register_userPhone').val();
								var register_pwd = $('#register_pwd').val();
								//alert(md5(register_pwd));
								$.post("zhuCe", {
									"userPhone" : register_userPhone,
									"userPwd" : md5(register_pwd),
									"code" : $("#code1").val()
								}, function(res) {
									console.log(res);
									if (res.code == 0) {
										alert("注册成功");
									} else {
										alert("注册失败");
									}
								}, "json");
								return false;
							});

					form.on('submit(updPwd)',
							function(data) {
								var resetpwd_userPhone = $(
										'#resetpwd_userPhone').val();
								var resetpwd_pwd = $('#resetpwd_pwd').val();
								//alert(md5(register_pwd));
								$.post("updUserPwdPhone", {
									"userPhone" : resetpwd_userPhone,
									"userPwd" : md5(resetpwd_pwd),
									"code" : $("#code").val()
								}, function(res) {
									console.log(res);
									if (res.code == 0) {
										alert("修改成功");
									} else {
										alert("修改失败,该用户不存在");
									}
								}, "json");
								return false;
							});
				});
				function fasong() {
					$.post("sendSMS", {
						"number" : $("#resetpwd_userPhone").val()
					}, function(user) {
						console.log(user);
						if (user != null) {
							alert("已发送短信，验证码5分钟内有效");
						} else if (user == null) {
							alert("发送失败，此用户不存在");
						}
					}, "json")
				};
				function fasong2() {
					$.post("sendSMS", {
						"number" : $("#register_userPhone").val()
					}, function(res) {
						console.log(res);
						if (res.code == 0) {
							alert("已发送短信，验证码5分钟内有效");
						} else if (res.code == 1) {
							alert("发送失败，此用户不存在");
						}
					}, "json")
				}
			</script>
			<!--MD5加密-->
			<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
			<script>
				//页面加载时，生成随机验证码
				window.onload = function() {
					createCode(4);
				}
				//生成验证码的方法
				function createCode(length) {
					var code = "";
					var codeLength = parseInt(length); //验证码的长度
					var checkCode = document.getElementById("checkCode");
					////所有候选组成验证码的字符，当然也可以用中文的
					var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
							'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
							'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
							'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D',
							'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N',
							'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
							'Y', 'Z');
					//循环组成验证码的字符串
					for (var i = 0; i < codeLength; i++) {
						//获取随机验证码下标
						var charNum = Math.floor(Math.random() * 62);
						//组合成指定字符验证码
						code += codeChars[charNum];
					}
					if (checkCode) {
						//为验证码区域添加样式名
						checkCode.className = "code";
						//将生成验证码赋值到显示区
						checkCode.innerHTML = code;
					}

				}
				//检查验证码是否正确
				function validateCode() {
					//获取显示区生成的验证码
					var checkCode = document.getElementById("checkCode").innerHTML;
					//获取输入的验证码
					var inputCode = document.getElementById("inputCode").value;
					console.log(checkCode);
					console.log(inputCode);
					if (inputCode.length <= 0) {
						$("#codeTip").html("请输入验证码").css("color", "red")
						$("#user").val("1")
						return false;
					} else if (inputCode.toUpperCase() != checkCode
							.toUpperCase()) {
						$("#codeTip").html("验证码输入有误！").css("color", "red")
						$("#user").val("1")
						return false;
						createCode(4);
					} else {
						$("#codeTip").html("验证码输入正确！").css("color", "green")
						return true;
					}
				}
			</script>

		</div>
	</div>
	<!-- 底部信息 -->
	<!-- 引入脚部 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>